<template>
    <div class="my-coupon">
    <h1 class="f30 flex fdc pr">
        <div class="f35">
            <router-link class="img pa cfff" to="/mine" style="left: 20rem">
            <i class="el-icon-arrow-left  f40 " ></i>
            </router-link>  
        优惠券  
        </div>
        <div class="link f25 cfff flex jcsb aic w100 f30">
            <router-link  class="ml50 cfff "  to="/couponHeader/couponUnused/" exact-active-class="active">未使用</router-link>
            <router-link  class="cfff " to="/couponHeader/couponUsed" exact-active-class="active" >已使用</router-link>
            <router-link  class="mr50 cfff " to="/couponHeader/couponOutdate" exact-active-class="active">已过期</router-link>
        </div>
    </h1>
    <div> 
         <router-view></router-view>   
    </div>
    </div>
</template>
<style scoped>
.my-coupon {
    background-color: #3385fc;
    height: 354rem;
}
h1 {
    display: flex;
    font-weight: 370;
    color: white;
    width: 100%;
    height: 180rem;
    align-items: center;
    justify-content: center;
}
/* h1+div {
    background-color: white;
    width: 92%;
    margin: auto;
    border-radius: 15rem;
    height: 100%;
} */
.active{
   padding-bottom: 10rem; 
    border-bottom: white solid 4rem;
}
.link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rem 20rem 1rem 20rem;
}
</style>